<template>
  <view>
    <view class="logo-container d-flex a-center j-center">
      <image
        src="/static/images/logo1.png"
        style="height: 112upx;width: 390upx;"
        mode=""
      ></image>
    </view>
    <view class="register-form">
      <view class="sun-form-item border-bottom">
        <text class="iconfont icon-denglu"></text>
        <input
          v-model="infoData.userName"
          placeholder="手机号/用户名"
          type="text"
        >
      </view>
      <view class="sun-form-item border-bottom">
        <text class="iconfont icon-mima2"></text>
        <input
          v-model="infoData.password"
          type="password"
          placeholder="密码"
        >
      </view>
      <view
        class="sun-btn"
        @tap="executeLogin"
      >
        <text class="font-30">登录</text>
      </view>
      <view
        class="d-flex a-center j-center font-24 my-3"
        style="height: 60upx;color: #CCCCCC;"
      >
        <text @tap="skipPage(0)">现在注册</text>
        <text>|</text>
        <text @tap="skipPage(1)">忘记密码</text>
      </view>
    </view>
    <view class="d-flex a-center j-sb split-line">
      <view class="border-bottom sun-line"></view>
      <text style="color: #A2A2A2;">OR</text>
      <view class="border-bottom sun-line"></view>
    </view>
    <view
      class="d-flex a-center login-types"
      style="justify-content: space-around;"
    >
      <!-- QQ登录 -->
      <view
        class="iconfont icon-qq"
        @click.stop="onQQLogin"
      ></view>
      <!-- 微信登录 -->
      <view
        class="iconfont icon-weixin"
        @tap="wxLogin"
      ></view>
      <!-- 微博登录 -->
      <view
        class="iconfont icon-weibo"
        @click.stop="onWeiboLogin"
      ></view>
    </view>

    <!-- 苹果登录 -->
    <view
      v-if="showAppleLogin"
      class="sign-in"
      @click.stop="onAppleSignIn"
    >
      <image
        src="/static/apple-id.png"
        class="apple-icon"
      ></image>
    </view>
  </view>
</template>

<script>
import api from '@/common/lib/request.js';

export default {
  data() {
    return {
      infoData: {
        userName: "",
        password: "",
      },
      isAgree: false
    }
  },
  computed: {
    isIOS() {
      return this.$store.getters.isIOS
    },
    systemVersion() {
      let version = this.$store.state.sys && this.$store.state.sys.system
      let ver = parseFloat(version)
      if (ver !== NaN) {
        return ver > 13.0
      }
    },
    // 是否显示苹果登录，iOS13以上的系统才有苹果登录功能
    showAppleLogin() {
      // #ifdef APP-PLUS
      return this.isIOS && this.systemVersion
      // #endif
      return false
    }
  },
  methods: {
    skipPage(type) {
      if (type == 0) {
        uni.redirectTo({
          url: '/pages/mine/register/register'
        });
      } else if (type == 1) {
        uni.redirectTo({
          url: '/pages/mine/reset/reset'
        });
      } else if (type == 2) {
        uni.switchTab({
          url: '/pages/mine/new_mine'
        })
      }
    },
    // 校验并执行登录
    executeLogin() {
      let _this = this;
      if (!this.infoData.userName.trim() || !this.infoData.password.trim()) {
        uni.showToast({
          icon: 'none',
          title: '用户名和密码不能为空！'
        })
        return
      }
      api.request({
        url: '/login',
        method: 'POST',
        data: {
          userName: _this.infoData.userName.trim(),
          password: _this.infoData.password.trim()
        }
      })
        .then(response => {
          if (!response) return
          console.log(1)
          try {
            uni.setStorageSync('token', response.token)
            _this.$common.setUserInfo(_this.infoData)
            _this.getUserInfo()
          } catch (e) {

          }

        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取用户登录信息
    getUserInfo() {
      let _this = this;
      let token = uni.getStorageSync("token");
      api.request({
        url: '/user/info',
        data: {
          userName: _this.infoData.userName.trim(),
          token: token
        }
      })
        .then(response => {
          console.log(response);
          uni.setStorage({
            key: 'userInfo',
            data: JSON.stringify(response),
            success() {
              _this.skipPage(2)
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 微信登录
    wxLogin() {
      let self = this
      console.log('uni.login wxLogin')
      uni.login({
        provider: 'weixin',
        success: function (loginRes) {
          console.log('weixin loginRes', loginRes)
          uni.getUserInfo({
            provider: 'weixin',
            success: function (infoRes) {
              console.log('weixin infoRes', infoRes)
              self.thirdLogin(infoRes.userInfo.openId, infoRes.userInfo.nickName, 2)
            }
          })
        },
        fail: function(err) {
          console.error(err)
          self.$showToast('登录失败')
        }
      })
    },
    // QQ登录
    onQQLogin() {
      let self = this
      console.log('onQQLogin')
      uni.login({
        provider: 'qq',
        success: function (loginRes) {
          // 登录成功
          uni.getUserInfo({
            provider: 'qq',
            success(user) {
              // 获取用户信息成功
              self.appleLogin(user, 1)
            }
          })
        },
        fail: function (err) {
          console.log(err)
          uni.showToast({
            title: "登录失败",
            icon: 'none'
          })
        }
      })
    },
    // 微博登录
    onWeiboLogin() {
      let self = this
      console.log('onWeiboLogin')
      uni.login({
        provider: 'sinaweibo',
        success: function (loginRes) {
          // 登录成功
          uni.getUserInfo({
            provider: 'sinaweibo',
            success(user) {
              // 获取用户信息成功
              self.appleLogin(user, 3)
            }
          })
        },
        fail: function (err) {
          console.log(err)
          uni.showToast({
            title: "登录失败",
            icon: 'none'
          })
        }
      })
    },
    // 第三方登录
    thirdLogin(key, userName, type) {
      var _this = this;
      console.log(key);
      console.log(type);
      api.request({
        url: '/authLogin',
        method: 'POST',
        data: {
          key: key,
          type: type
        }
      }).then(response => {
        console.log(JSON.stringify(response));
        if (!response.token) {
          uni.showToast({
            title: "账号未绑定",
            icon: 'none'
          });
          return;
        }
        uni.setStorageSync('token', response.token)
        _this.getUserInfo();
      }).catch(err => {
        console.log(err);
        uni.showToast({
          title: "账号未绑定",
          icon: 'none'
        });
      });
    },
    // Sign in with Apple
    onAppleSignIn() {
      let self = this
      console.log('onAppleSignIn')
      uni.login({
        provider: 'apple',
        success: function (loginRes) {
          // 登录成功
          uni.getUserInfo({
            provider: 'apple',
            success(user) {
              // 获取用户信息成功
              self.appleLogin(user, 4)
            }
          })
        },
        fail: function (err) {
          uni.showToast({
            title: "登录失败",
            icon: 'none'
          })
        }
      })
    },
    appleLogin(user, type) {
      console.log('appleLogin user =>', user)
      api.request({
        url: '/authLogin',
        method: 'POST',
        data: {
          key: user.userInfo.openid,
          type: type
        }
      }).then(response => {
        if (!response.token) {
          uni.showToast({
            title: "账号未绑定",
            icon: 'none'
          })
        }
        uni.setStorageSync('token', response.token)
        this.getUserInfo()
      }).catch(err => {
        uni.showToast({
          title: "账号未绑定",
          icon: 'none'
        })
      })
    }
  }
}
</script>

<style scoped>
.logo-container {
  width: 100%;
  height: 375rpx;
}

.register-form {
  width: 570upx;
  padding: 30upx 90upx;
}

.sun-form-item {
  display: flex;
  margin-bottom: 20upx;
  height: 80upx;
  align-items: center;
}

.sun-form-item .sun-label {
  width: 120upx;
}

.sun-form-item input {
  flex: 1;
  font-size: 28upx;
  text-indent: 1em;
}

.sun-btn {
  margin-top: 120upx;
  background-color: #005bac;
  height: 90upx;
  color: white;
  text-align: center;
  line-height: 90upx;
}

.login-types {
  padding: 0 90upx;
}

.login-types .iconfont {
  font-size: 96upx;
  color: #a2a2a2;
}

.split-line {
  padding: 0 90upx;
}

.split-line .sun-line {
  flex: 0.45;
  height: 1upx;
}

.sign-in {
  margin-top: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apple-icon {
  width: 424rpx;
  height: 76rpx;
}
</style>
